<template>
    <div class="userglobal">
        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="auto">
            <n-form-item label="用户名">
                <n-input v-model:value="model.username" disabled placeholder="请输入" />
            </n-form-item>
            <n-form-item path="password" label="头像">
                <n-upload @finish="handleFinish" :show-remove-button="true"
                    action="http://demonuxtapi.dishait.cn/pc/upload" :default-file-list="fileList" :headers="{
                        appid: appid,
                        token: token
                    }" accept=".jpg,.png" :max="1" :custom-request="Upload" list-type="image-card">
                    点击上传
                </n-upload>
            </n-form-item>
            <n-form-item label="昵称" path="nickname">
                <n-input v-model:value="model.nickname" placeholder="请输入" />
            </n-form-item>
            <n-form-item label="性别" path="sex">
                <n-radio-group v-model:value="model.sex">
                    <n-space>
                        <n-radio value="未知">
                            未知
                        </n-radio>
                        <n-radio value="男">
                            男
                        </n-radio>
                        <n-radio value="女">
                            女
                        </n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>
            <n-form-item>
                <n-button type="success" @click="submit()">提交修改</n-button>
            </n-form-item>

        </n-form>
    </div>
</template>
<script setup>
import { NForm, NFormItem, NButton, NInput, NUpload, NRadioGroup, NRadio, NSpace } from 'naive-ui';
import { getCurrentInstance } from "vue";
import { useRouter } from 'nuxt/app';
let { ctx: that, proxy } = getCurrentInstance()
onMounted(() => {
    console.log("修改资料")
    token.value = window.localStorage.getItem("token")
    getinfo()
})
const getinfo = async () => {
    const { data } = await useHttp("", "/getinfo");
    console.log(data)
    model.value = data.value
console.log(model.value,"model")
    fileList.value.push({
        id: 'd',
        name: model.value.avatar,
        url:model.value.avatar,
        
        status: 'finished',

    })
}
const fileList = ref([]);
const model = ref({
    username: "",
    avatar: "",
    nickname: "",
    sex: "",
});
const token = ref("");
const appid = ref("bd9d01ecc75dbbaaefce")
const handleFinish = (e) => {
    console.log(e)
    console.log(fileList.value)

}
const Upload = async ({ file }) => {
    const formData = new FormData();
    // 添加文件到 formData
    formData.append('file', file.file);
    const { data } = await useHttp("", "/upload", {
        method: "post",
        body: formData
    })
    console.log(data.value)
    model.value.avatar = data.value;
  


}
const rules = {
    nickname: {
        required: true,
        trigger: ['blur', 'input'],
        message: '请输入昵称'
    },
    sex: {
        required: true,
        trigger: 'change',
        message: '请选择性别'
    }
}
const submit = async () => {
  const { message, dialog } = createDiscreteApi(['message', 'dialog'])

    if (model.value.nickname == '' || model.value.sex == '') {
        
        message.warning("请输入必填项")
        return
    }
    const { data } = await useHttp("", "/update_info", {
        method: "post",
        body: {
            avatar: model.value.avatar,
            nickname: model.value.nickname,
            sex: model.value.sex
        }
    })
    that.$forceUpdate()
    message.success("成功");
    getinfo()


}
</script>
<style scoped>
.userglobal {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
</style>